<template>
	<van-nav-bar title="能效计算器" left-text="返回" left-arrow @click-left="onClickLeft"/>
	<van-row>
		<van-col span="12" class="row-title" style="border-right: 1px dashed #cdcde6;">
			电压(V)
		</van-col>
		<van-col span="12" class="row-title">
			电流(A)
		</van-col>
	</van-row>
	<van-row>
		<van-col span="12" style="padding: 0 5px;border-right: 1px dashed #cdcde6;">
			<van-cell-group>
				<van-field label-width="45" v-model="voltage" type="number" label="电压:" placeholder="电压" clearable />
				<van-field label-width="45" v-model="voltageRange" name="量程" label="量程:" type="number" clearable />

				<van-field label-width="45" v-model="voltageGear" is-link readonly label="档位:" placeholder="选择档位"
					@click="voltageGearShowPicker = true" />
				<van-popup v-model:show="voltageGearShowPicker" round position="bottom">
					<van-picker :default-index="3" :columns="voltageGearList" @cancel="voltageGearShowPicker = false"
						@confirm="voltageGearOnConfirm" />
				</van-popup>
			</van-cell-group>
			<div class="voltage-value">
				每格: {{voltageEachSmallGrid}}(V)
				<van-popover v-model:show="showPopover1" placement="top" theme="dark">
					<div style="padding: 10px;">
						每格:{{voltageGear}}/{{voltageRange}} = {{voltageEachSmallGrid}}(V)
					</div>
					<template #reference>
						<van-icon name="question-o" />
					</template>
				</van-popover>
			</div>
			<div class="voltage-value">
				指向: <span class="font-red-color">{{voltagePointGrid}}</span>(格)
				<van-popover v-model:show="showPopover2" placement="top" theme="dark">
					<div style="padding: 10px;">
						指向:{{voltage}}/{{voltageEachSmallGrid}} = <span
							class="font-red-color">{{voltagePointGrid}}</span>(格)
					</div>
					<template #reference>
						<van-icon name="question-o" />
					</template>
				</van-popover>
			</div>
		</van-col>
		<van-col span="12" style="padding: 0 5px;">
			<van-cell-group>
				<van-field label-width="45" v-model="electricCurrentGrid" label="格数:" placeholder="格数" type="number"
					clearable />
				<van-field label-width="45" v-model="electricCurrentRange" name="量程" label="量程:" type="number"
					clearable />

				<van-field label-width="45" v-model="electricCurrentGear" is-link readonly label="档位:"
					placeholder="选择档位" @click="electricCurrentShowPicker = true" />
				<van-popup v-model:show="electricCurrentShowPicker" round position="bottom">
					<van-picker :default-index="0" :columns="electricCurrentGearList"
						@cancel="electricCurrentShowPicker = false" @confirm="electricCurrentShowPickerOnConfirm" />
				</van-popup>
			</van-cell-group>
			<div class="voltage-value">
				每格: {{electricCurrentEachSmallGrid}}(A)
				<van-popover v-model:show="showPopover3" placement="top" theme="dark">
					<div style="padding: 10px;">
						每格:{{electricCurrentGear}} / {{electricCurrentRange}} = {{electricCurrentEachSmallGrid}}(A)
					</div>
					<template #reference>
						<van-icon name="question-o" />
					</template>
				</van-popover>

			</div>
			<div class="voltage-value">
				电流: <span class="font-red-color">{{electricCurrentValue}}</span>(A)
				<van-popover v-model:show="showPopover4" placement="top" theme="dark">
					<div style="padding: 10px;">
						电流:{{electricCurrentGrid}} * {{electricCurrentEachSmallGrid}} = <span
							class="font-red-color">{{electricCurrentValue}}</span>(A)
					</div>
					<template #reference>
						<van-icon name="question-o" />
					</template>
				</van-popover>
			</div>
		</van-col>
	</van-row>
	<van-divider />
	<div style="font-size: 14px; text-align: left;">

		<van-cell title="吸持功率=">
			<template #right-icon>
				<span class="font-red-color"
					style="text-align: left;">{{holdingPowerApproximately}}</span>&nbsp;(V·A)&nbsp;
				<van-popover v-model:show="showPopover5" placement="top" theme="dark">
					<div style="padding: 10px;">
						{{electricCurrentValue}} * {{voltage}} = {{holdingPower}} (V·A)
					</div>
					<template #reference>
						<van-icon name="question-o" />
					</template>
				</van-popover>
			</template>
		</van-cell>

		<van-cell-group>
			<van-field label-width="85" v-model="ratedVoltage" label="额定电压(Ie)" placeholder="额定电压" type="number"
				clearable />
			<van-tabs v-model:active="active">
				<van-tab title="国标">
					<table class="table">
						<tr>
							<th>额定电压(Ie)</th>
							<th>三级</th>
							<th>二级</th>
						</tr>
						<tr v-for="(item,index) in nationalStandardList" :class="{'check': index == nengxiao[0]}">
							<td>{{item[0]}} ＜ Ie ≤ {{item[1]}}</td>
							<td :class="{'check3': index == nengxiao[0] && nengxiao[1] == 3}">{{item[2][0]}}</td>
							<td :class="{'check2': index == nengxiao[0] && nengxiao[1] == 2}">{{item[2][1]}}</td>
						</tr>
					</table>
				</van-tab>
				<van-tab title="公司">
					<table class="table">
						<tr>
							<th>额定电压(Ie)</th>
							<th>三级</th>
							<th>二级</th>
						</tr>
						<tr v-for="(item,index) in enterpriseStandardList" :class="{'check': index == nengxiao1[0]}">
							<td>{{item[0]}} ＜ Ie ≤ {{item[1]}}</td>
							<td :class="{'check3': index == nengxiao1[0] && nengxiao1[1] == 3}">{{item[2][0]}}</td>
							<td :class="{'check2': index == nengxiao1[0] && nengxiao1[1] == 2}">{{item[2][1]}}</td>
						</tr>
					</table>
				</van-tab>
				<van-tab title="内控">
					<table class="table">
						<tr>
							<th>额定电压(Ie)</th>
							<th>三级</th>
							<th>二级</th>
						</tr>
						<tr v-for="(item,index) in InternalControlList" :class="{'check': index == nengxiao2[0]}">
							<td>{{item[0]}} ＜ Ie ≤ {{item[1]}}</td>
							<td :class="{'check3': index == nengxiao2[0] && nengxiao2[1] == 3}">{{item[2][0]}}</td>
							<td :class="{'check2': index == nengxiao2[0] && nengxiao2[1] == 2}">{{item[2][1]}}</td>
						</tr>
					</table>
				</van-tab>
				<van-tab title="自定义">
					<table class="table">
						<tr>
							<th>额定电压(Ie)</th>
							<th>三级</th>
							<th>二级</th>
							<th width="28">操作</th>
						</tr>
						<tr v-for="(item,index) in customList" :class="{'check': index == nengxiao3[0]}">
							<td>{{item[0]}} ＜ Ie ≤ {{item[1]}}</td>
							<td :class="{'check3': index == nengxiao3[0] && nengxiao3[1] == 3}">{{item[2][0]}}</td>
							<td :class="{'check2': index == nengxiao3[0] && nengxiao3[1] == 2}">{{item[2][1]}}</td>
							<td>
								<van-button icon="delete" type="danger" size="mini" @click="deleteCustomItem(index)" />
							</td>
						</tr>
					</table>
					<van-row>
						<van-col span="11">
							<van-button type="danger" block size="small" @click="clearCustomList">清空</van-button>
						</van-col>
						<van-col span="2">
						</van-col>
						<van-col span="11">
							<van-button type="primary" block size="small" @click="addCustomList">添加</van-button>
						</van-col>
					</van-row>
					<van-action-sheet v-model:show="show" title="添加">
						<div class="content">
							<table class="custom">
								<tr>
									<th colspan="2" style="text-align: center;">Ie</th>
									<th>三级</th>
									<th>二级</th>
								</tr>
								<tr>
									<td>
										<van-field v-model="customItem[0]" placeholder="Ie" />
									</td>
									<td>
										<van-field v-model="customItem[1]" placeholder="Ie" />
									</td>
									<td>
										<van-field v-model="customItem[2]" placeholder="三级" />
									</td>
									<td>
										<van-field v-model="customItem[3]" placeholder="二级" />
									</td>
								</tr>
							</table>
							<van-button type="primary" block size="small" @click="saveCustomList">保存</van-button>
						</div>
					</van-action-sheet>
				</van-tab>
			</van-tabs>
		</van-cell-group>
		<van-row style="padding: 5px 20px; text-align: left; font-size: 0.42667rem">
			<van-col span="24">实测电压 {{voltagePointGrid}} 格 {{voltage}}V</van-col>
		</van-row>
		<van-row style="padding: 5px 20px; text-align: left; font-size: 0.42667rem">
			<van-col span="24">实测电流 {{electricCurrentGrid}} 格 {{electricCurrentValue}}A</van-col>
		</van-row>
		<van-row style="padding: 5px 20px; text-align: left; font-size: 0.42667rem">
			<van-col span="24">吸持功率 {{holdingPowerApproximately}} V·A</van-col>
		</van-row>
	</div>
</template>

<script>
	import {
		ref
	} from 'vue';
	import {
		Dialog,
		Notify
	} from 'vant';
	import CONSTANT from '@/utils/constant.js'

	export default {
		name: 'NengXiao',
		components: {},
		setup() {
			const active = ref(0)
			//电压
			const voltage = ref(380)
			const voltageRange = ref(150)
			const voltageGearList = [150, 300, 450, 600]
			const voltageGear = ref(600);
			const voltageGearShowPicker = ref(false);

			const voltageGearOnConfirm = (value) => {
				voltageGear.value = value;
				voltageGearShowPicker.value = false;
			};
			//电流
			const electricCurrentRange = ref(150);
			const electricCurrentGrid = ref(41.8);
			const electricCurrentGearList = [0.075, 0.15, 0.3, 0.75, 1.5, 3, 7.5, 15, 30, 60]
			const electricCurrentGear = ref(0.075);
			const electricCurrentShowPicker = ref(false);

			const electricCurrentShowPickerOnConfirm = (value) => {
				electricCurrentGear.value = value;
				electricCurrentShowPicker.value = false;
			};
			//问号
			const showPopover1 = ref(false);
			const showPopover2 = ref(false);
			const showPopover3 = ref(false);
			const showPopover4 = ref(false);
			const showPopover5 = ref(false);

			//额定电压
			const ratedVoltage = ref(0);

			//国标
			const nationalStandardList = ref([
				[0, 12, [8.3, 5]],
				[12, 22, [8.5, 5.1]],
				[22, 32, [13.9, 8.3]],
				[32, 40, [19, 11.4]],
				[40, 63, [57, 34.2]],
				[63, 100, [61, 36.6]],
				[100, 160, [85.5, 51.3]],
				[160, 250, [152, 91.2]],
				[250, 400, [250, 150]],
				[400, 630, [250, 150]],
			]);
			//企业标准
			const enterpriseStandardList = ref([
				[0, 12, [9, 5]],
				[12, 22, [9.5, 5.1]],
				[22, 32, [14, 8.3]],
				[32, 40, [19, 11.4]],
				[40, 63, [57, 34.2]],
				[63, 100, [61, 36.6]],
				[100, 160, [85.5, 51.3]],
				[160, 250, [152, 91.2]],
				[250, 400, [250, 150]],
				[400, 630, [250, 150]],
			]);
			//内控
			const InternalControlList = ref([
				[6, 22, [9.5, 5.1]],
				[22, 31, [14, 8.3]],
				[31, 40, [19, 11.4]],
				[40, 100, [61, 36.6]],
				[100, 160, [85.5, 51.3]],
				[160, 250, [152, 91.2]],
				[250, 400, [250, 150]],
				[400, 630, [250, 150]],
			])
			const customList = ref([])

			const listActive = -1;
			const show = ref(false)
			const customItem = ref([])




			return {
				active,
				voltage,
				voltageRange,
				voltageGear,
				voltageGearList,
				voltageGearShowPicker,
				voltageGearOnConfirm,
				electricCurrentGrid,
				electricCurrentGear,
				electricCurrentRange,
				electricCurrentGearList,
				electricCurrentShowPicker,
				electricCurrentShowPickerOnConfirm,
				showPopover1,
				showPopover2,
				showPopover3,
				showPopover4,
				showPopover5,
				ratedVoltage,
				nationalStandardList,
				enterpriseStandardList,
				InternalControlList,
				customList,
				listActive,
				show,
				customItem
			}
		},
		mounted: function() {
			this.initCustomList()
		},
		methods: {
			initCustomList: function() {
				const item = JSON.parse(localStorage.getItem(CONSTANT.CALC_NENGXIAO_LOCALSTORAGE))
				this.customList = item ? item : []
			},
			onClickLeft: function() {
				this.$router.go(-1)
			},
			onClickRight: function() {

			},
			addCustomList: function() {
				this.show = true;
			},
			saveCustomList: function() {
				this.customList.push([this.customItem[0], this.customItem[1],
					[this.customItem[2], this.customItem[3]]
				])
				localStorage.setItem(CONSTANT.CALC_NENGXIAO_LOCALSTORAGE, JSON.stringify(this.customList))

				Notify({
					type: 'success',
					message: '保存成功。',
					duration: 1500
				});
			},
			cancelCustomList: function() {
				this.show = false;
			},
			deleteCustomItem: function(index) {
				Dialog.confirm({
						title: '删除',
						message: '确认删除？',
					})
					.then(() => {
						this.customList.splice(index, 1)
						localStorage.setItem(CONSTANT.CALC_NENGXIAO_LOCALSTORAGE, JSON.stringify(this.customList))
					})
					.catch(() => {
						// on ca
					})

			},
			clearCustomList: function(index) {
				Dialog.confirm({
						title: '清空',
						message: '确认清空所有数据？',
					})
					.then(() => {
						this.customList.splice(0, this.customList.length)

						localStorage.clear()
					})
					.catch(() => {
						// on ca
					})

			},
		},
		computed: {
			voltageEachSmallGrid: function() {
				return this.voltageGear / this.voltageRange
			},
			voltagePointGrid: function() {
				return (this.voltage / this.voltageEachSmallGrid).toFixed(3)
			},
			electricCurrentEachSmallGrid: function() {
				return this.electricCurrentGear / this.electricCurrentRange
			},
			electricCurrentValue: function() {
				return (this.electricCurrentGrid * this.electricCurrentEachSmallGrid).toFixed(3)
			},
			holdingPower: function() {
				return this.electricCurrentValue * this.voltage
			},
			holdingPowerApproximately: function() {
				return this.holdingPower.toFixed(2)
			},
			nengxiao: function() {
				for (let x in this.nationalStandardList) {
					if (this.ratedVoltage > this.nationalStandardList[x][0] && this.ratedVoltage <= this
						.nationalStandardList[x][1]) {
						if (this.holdingPowerApproximately <= this.nationalStandardList[x][2][1]) {
							return [x, 2];
						} else if (this.holdingPowerApproximately <= this.nationalStandardList[x][2][0]) {
							return [x, 3];
						}
						break;
					}
				}

				return [-1, -1];
			},
			nengxiao1: function() {
				for (let x in this.enterpriseStandardList) {
					if (this.ratedVoltage > this.enterpriseStandardList[x][0] && this.ratedVoltage <= this
						.enterpriseStandardList[x][1]) {
						if (this.holdingPowerApproximately <= this.enterpriseStandardList[x][2][1]) {
							return [x, 2];
						} else if (this.holdingPowerApproximately <= this.enterpriseStandardList[x][2][0]) {
							return [x, 3];
						}
						break;
					}
				}

				return [-1, -1];
			},
			nengxiao2: function() {
				for (let x in this.InternalControlList) {
					if (this.ratedVoltage > this.InternalControlList[x][0] && this.ratedVoltage <= this
						.InternalControlList[x][1]) {
						if (this.holdingPowerApproximately <= this.InternalControlList[x][2][1]) {
							return [x, 2];
						} else if (this.holdingPowerApproximately <= this.InternalControlList[x][2][0]) {
							return [x, 3];
						}
						break;
					}
				}

				return [-1, -1];
			},
			nengxiao3: function() {
				for (let x in this.customList) {
					if (parseFloat(this.ratedVoltage) > parseFloat(this.customList[x][0]) && parseFloat(this
							.ratedVoltage) <= parseFloat(this
							.customList[x][1])) {
						if (parseFloat(this.holdingPowerApproximately) <= parseFloat(this.customList[x][2][1])) {
							return [x, 2];
						} else if (parseFloat(this.holdingPowerApproximately) <= parseFloat(this.customList[x][2][
								0
							])) {
							return [x, 3];
						}
						break;
					}
				}

				return [-1, -1];
			}
		}
	}
</script>

<style>
	.row-title {
		padding: 10px;
		font-size: 16px;
	}

	.voltage-value {
		padding: 0 var(--van-cell-vertical-padding);
		margin-top: 10px;
		font-size: 14px;
		text-align: left;
	}

	.font-red-color {
		color: #ff3b3b;
	}

	table {
		border-collapse: collapse;
		width: 100%;
	}

	th,
	td {
		padding: 8px;
		text-align: left;
		border-bottom: 1px solid #ddd;
	}

	.check {
		color: #3eaf7c;
	}

	.check3,
	.check2 {
		background-color: #3eaf7c;
		color: #FFFFFF;
	}

	.content {
		padding: 16px 16px 160px;
	}

	.custom .van-cell {
		padding: 0;
	}
</style>
